<template>
  <view class="totalTop">
    <view class="total_top1">
      <view class="total_left" v-if="balanceList[0]">
        <text>{{ balanceList[0].type }}</text>
        <text>￥</text>
        <text>{{ balanceList[0].value }}</text>
        <uni-icons :type="downT ? 'top' : 'bottom'" size="22" color="#fff" @click="submit('1')"></uni-icons>
      </view>
    </view>
    <view class="space-between" v-if="downT" 
    style="background-color: #1b91ff;
          padding: 15rpx 30rpx;
          box-sizing: border-box;
          color:#fff;
          font-size: 30rpx;
          font-weight: 400;
          align-items: flex-start;">
      <view class="direction-start" style="width:55%">
        <view class="" v-for="(item, index) in balance" :key="index">
          <text style="font-size: 24rpx;width: 140rpx;display:inline-block">{{ item.type }}</text>
          <text style="font-size: 18rpx;margin:0px 15rpx;">￥</text>
          <text>{{ item.value }}</text>
        </view>
      </view>
      <view class="direction-start" style="width:45%">
        <view class="" v-for="(item,index) in fenbomoneyLis" :key='index'>
          <text style="font-size: 24rpx;width: 100rpx;display:inline-block">分拨资金</text>
          <text style="font-size: 18rpx;margin:0px 15rpx;">￥</text>
          <text>{{item.money}}</text>
        </view>
      </view>
    </view>
    <view class="total_top3">
      <view class="" v-for="(item, index) in Cumulative" :key="index">
        <text>{{item.name}}</text>
        <text>￥</text>
        <text>{{ item.value }}</text>
      </view>
    </view>
    <image :src="downT ? '../../static/index/icon1.png' : '../../static/index/icon2.png'" mode="" class="image"
      :style="{ width: downT ? '150rpx' : '150rpx', height: downT ? '215rpx' : '147rpx' }"></image>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { showLoading } from '@/utils/prompt';
  import { accountInfo } from '@/gql/account';
  import { fenbomoneylist } from '@/gql/fenbo';
  import { getDriverID } from '@/stores/driverID';
  import { toPublish } from '@mqtt';
  const driver_id = getDriverID();
  const downT = ref(false);
  const balanceList = ref([]);
  const balance = ref([]);
  const Cumulative = ref([]);
  const fenbomoneyLis=ref([])
  const props = defineProps({
    type: {
      type: String,
      default: '',
    },
  });
  function getAccountInfo() {
    showLoading();
    const payload = {
      query: accountInfo,
      variables: { driver_id, type: props.type },
    };
    toPublish('ql/driver/getTotalList', payload, (obj : any) => {
      balanceList.value = obj.data.account_list;
      balance.value = obj.data.account_list.slice(1);
      Cumulative.value = obj.data.account_total_list.slice(1);
    });
  }
  function submit(num) {
    switch (num) {
      case '1':
        downT.value = !downT.value;
        break;
      case '2':
        uni.navigateTo({
          url: '/pages/giftCard/tokenCard',
        });
        break;
    }
  }
  fenbomoney()
  function fenbomoney() {
    showLoading();
    const payload = {
      query: fenbomoneylist,
      variables: { driver_id},
    };
    toPublish('ql/driver/getFenboMoneyList', payload, (obj : any) => {
      fenbomoneyLis.value = obj.data.fenbo_money_list;
    });
  }
  defineExpose({
    getAccountInfo,
  });
</script>

<style scoped lang="less">
  @import url('../account/less/accountTop.less');
</style>